<template>
  <div>
    <el-card class="mineSwp-comtainer" shadow="hover" :body-style="{ padding: '20px' }">
      <div slot="header" class="card-header">
        <div>
          <el-button type="success" v-if="isGaming" plain @click="reStart">重新开始</el-button>
          <el-button type="success" v-else plain @click="startGame">开始游戏</el-button>
        </div>
        <div>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="难度">
              <el-select v-model="formInline.difficulty" placeholder="难度">
                <el-option label="简单" value="0.12"></el-option>
                <el-option label="困难" value="0.22"></el-option>
                <el-option label="地狱" value="0.32"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- card body -->
      <div class="content">
        <h1 v-if="blocks == undefined">请点击开始按钮以开始游戏</h1>
        <div class="msg" v-if="blocks != undefined && blocks.length == 96">
          <h3>还剩{{ mineTotal }}个雷,左键扫雷,右键标记雷 得分: {{ score }}</h3>
        </div>
        <div v-if="blocks != undefined && blocks.length == 96" class="game">
          <div
            class="block"
            v-for="(item, index) in blocks"
            :key="index"
            v-bind:class="{'is-num': blocks[index].bgNum, 'is-mine': blocks[index].bgMine, 'is-not-mine': blocks[index].bgIsNotMine ,'is-flag':blocks[index].bgFlag }"
            @contextmenu.prevent="mouseRight(index)"
            @click="clkBlock(index)"
          >{{ item.aroundMines }}</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 是否已经开始游戏
      isGaming: false,
      // 所有可点击的小方块
      blocks: undefined,
      // 有多少个雷
      mineTotal: 0,
      // 得分
      score: 0,
      // 游戏结束
      gameover: false,
      // 中间变量
      total: 0,
      // 表单数据
      formInline: {
        difficulty: "0.12",
      },
      // 保存分数的参数
      scoreParams: {
        userid: undefined,
        gametyp: undefined,
        date: undefined,
        score: undefined,
      },
    };
  },

  created() {},
  methods: {
    init() {
      // 数据初始化
      this.blocks = [];
      this.mineTotal = 0;
      this.score = 0;
      this.gameover = false;

      // 循环生成小方块
      for (let i = 0; i < 96; i++) {
        // 根据选择的难度生成雷
        if (Math.random() > this.formInline.difficulty) {
          this.blocks.push({
            // 是否是雷
            isMine: false,

            // 背景样式
            bgMine: false,
            bgIsNotMine: false,
            bgFlag: false,
            bgNum: false,

            // 当前状态
            status: undefined,

            // 周围雷的数量
            aroundMines: undefined,

            // 是否被扫过
            sweeped: false,
          });
        } else {
          this.blocks.push({
            isMine: true,
            bgMine: false,
            bgIsNotMine: false,
            bgFlag: false,
            bgNum: false,
            status: undefined,
            aroundMines: undefined,
            sweeped: false,
          });
          this.mineTotal++;
        }
      }
    },

    // 开始游戏按钮
    startGame() {
      this.init();
      this.isGaming = true;
    },

    // 重新开始按钮
    reStart() {
      this.init();
    },

    // 鼠标右键单击事件
    mouseRight(index) {
      if (!this.gameover) {
        if (this.blocks[index].isMine) {
          if (this.blocks[index].status == undefined) {
            this.blocks[index].status = "flag";
            this.blocks[index].bgIsNotMine = false;
            this.blocks[index].bgMine = false;
            this.blocks[index].bgFlag = true;
            this.blocks[index].bgNum = false;
            this.mineTotal--;
            this.score++;
            if (this.mineTotal == 0) {
              this.setScore();
              const h = this.$createElement;
              this.$msgbox({
                title: "Congratulations !!! ",
                message: h("p", null, [
                  h("span", null, "恭喜你成功扫除所有的雷,总得分: "),
                  h("i", { style: "color: teal" }, `${this.score}`),
                ]),
                showCancelButton: true,
                confirmButtonText: "确定",
                cancelButtonText: "取消",
              }).then(() => {
                this.$message({
                  message: "请重新开始",
                  type: "success",
                });
              });
            }
          }
        } else {
          this.$notify.error({
            title: "GAME OVER",
            message: "人家明明不是雷",
          });
          this.blocks[index].bgIsNotMine = true;
          this.blocks[index].bgMine = false;
          this.blocks[index].bgFlag = false;
          this.blocks[index].bgNum = false;

          this.gameover = true;
        }
      } else {
        this.$message.error("您踩到雷了!!!  请重新开始");
      }
    },
    // 保存分数
    setScore() {
      this.scoreParams.userid = sessionStorage.getItem("loginMsg");
      this.scoreParams.gametyp = "扫雷";
      this.scoreParams.date = new Date().getTime();
      this.scoreParams.score = this.score;
      this.gGet("/game/setscore", this.scoreParams).then((res) => {
        if (res.data.code == "1") {
          this.$message({
            message: res.data.msg,
            type: "success",
          });
        } else if (res.data.code == "0") {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 点击方块触发方法
    clkBlock(index) {
      // alert(index);
      this.blocks[index].sweeped = true;
      if (!this.gameover) {
        if (this.blocks[index].isMine && this.blocks[index].status != "mine") {
          // 此处说明是雷
          this.$notify.error({
            title: "BOOM!!!",
            message: "OH NO !!! 你踩到雷了 !!!",
          });
          this.blocks[index].status = "mine";
          this.blocks[index].bgIsNotMine = false;
          this.blocks[index].bgMine = true;
          this.blocks[index].bgFlag = false;
          this.blocks[index].bgNum = false;

          this.gameover = true;
        } else {
          // 此处说明不是雷,背景变为白色
          this.blocks[index].bgIsNotMine = false;
          this.blocks[index].bgMine = false;
          this.blocks[index].bgFlag = false;
          this.blocks[index].bgNum = true;

          // 此方法判断周围有多少雷
          this.judgeMine(index);
        }
      } else {
        this.$message.error("您踩到雷了,请重新开始");
      }
    },

    // 找到周围的方块
    aroundBlocks(i) {
      var arr = [];
      if (i == 0) {
        arr = [1, 12, 13];
      } else if (i == 11) {
        arr = [10, 22, 23];
      } else if (i == 84) {
        arr = [72, 73, 85];
      } else if (i == 95) {
        arr = [82, 83, 94];
      } else if (i >= 1 && i <= 10) {
        arr = [i - 1, i + 1, i + 11, i + 12, i + 13];
      } else if (
        i == 12 ||
        i == 24 ||
        i == 36 ||
        i == 48 ||
        i == 60 ||
        i == 72
      ) {
        arr = [i - 12, i - 11, i + 1, i + 12, i + 13];
      } else if (
        i == 23 ||
        i == 35 ||
        i == 47 ||
        i == 59 ||
        i == 71 ||
        i == 83
      ) {
        arr = [i - 13, i - 12, i - 1, i + 11, i + 12];
      } else if (i >= 85 && i <= 94) {
        arr = [i - 13, i - 12, i - 11, i - 1, i + 1];
      } else {
        arr = [i - 13, i - 12, i - 11, i - 1, i + 1, i + 11, i + 12, i + 13];
      }
      return arr;
    },

    // 判断周围有多少雷
    judgeMine(i) {
      var arr = this.aroundBlocks(i);
      this.total = 0;
      this.handleJudge(arr);
      this.blocks[i].aroundMines = this.total;
      this.isZero(i, this.total);
    },

    // 执行判断
    handleJudge(arr) {
      for (const j in arr) {
        if (this.blocks[arr[j]].isMine) {
          this.total++;
        }
      }
    },

    // 判断当前方块周围有多少雷
    isZero(i, total) {
      // 如果是0个雷则执行点击周围未被点击过的方块
      if (total == 0) {
        var arr = this.aroundBlocks(i);
        for (const key in arr) {
          // 判断周围的雷是否被踩过,没被踩过的才去踩
          if (!this.blocks[arr[key]].sweeped) {
            this.clkBlock(arr[key]);
          }
        }
      }
    },
  },
};
</script>

<style scoped>
.mineSwp-comtainer {
  width: 100%;
  background-color: #fffaf0;
  height: 86vh;
}

.card-header {
  display: flex;
}

.card-header > div:first-child {
  margin-right: 20px;
}

.content {
  width: 100%;
}

.game {
  margin: 0 auto;
  width: 900px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 10px;
}

.msg {
  width: 100%;
  text-align: center;
}

.block {
  width: 70px;
  height: 70px;
  margin-bottom: 5px;
  background-color: darkgray;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.05s linear;
  font-size: 70px;
  text-align: center;
  line-height: 70px;
}
.block:hover {
  background-color: rgb(199, 194, 194);
}

h3 {
  color: gray;
}

.is-mine {
  background-image: url("../../assets/boom.jpg");
  background-size: 100% 100%;
}
.is-not-mine {
  background-image: url("../../assets/isnotMine.jpg");
  background-size: 100% 100%;
}
.is-flag {
  background-image: url("../../assets/flag.jpg");
  background-size: 100% 100%;
}

.is-num {
  background-color: #fff;
}
</style>